<template>
    <view
        class="tui-tabs-view"
        :class="[isFixed ? 'tui-tabs-fixed' : 'tui-tabs-relative', unlined ? 'tui-unlined' : '']"
        :style="{
            width: tabsWidth + 'px',
            height: height + 'rpx',
            padding: `0 ${padding}rpx`,
            background: backgroundColor,
            top: isFixed ? top + 'px' : 'auto',
            zIndex: isFixed ? zIndex : 'auto'
        }"
    >
        <!-- 新增滚动容器：让标签项可以横向滚动 -->
        <view class="tui-tabs-scroll">
            <view 
                class="tui-tabs-container"  
                :style="{ height: height + 'rpx' }"
            >
                <view 
                    v-for="(item, index) in tabs" 
                    :key="index" 
                    class="tui-tabs-item" 
                    :style="{ width: itemWidth }" 
                    @tap.stop="swichTabs(index)"
                >
                    <!-- 标签标题和徽章 -->
                    <view
                        class="tui-tabs-title"
                        :class="{ 'tui-tabs-active': currentTab == index, 'tui-tabs-disabled': item.disabled }"
                        :style="{
                            color: currentTab == index ? selectedColor : color,
                            fontSize: size + 'rpx',
                            lineHeight: size + 'rpx',
                            fontWeight: bold && currentTab == index ? 'bold' : 'normal'
                        }"
                    >
                        <view 
                            :class="[item.isDot ? 'tui-badge-dot' : 'tui-badge']" 
                            :style="{ color: badgeColor, backgroundColor: badgeBgColor }" 
                            v-if="item.num"
                        >
                            {{ item.isDot ? '' : item.num }}
                        </view>
                        {{ item.name }}
                    </view>
                </view>
            </view>
        </view>

        <!-- 滑块 -->
        <view
            class="tui-tabs-slider"
            :style="{
                transform: 'translateX(' + scrollLeft + 'px)',
                width: sliderWidth + 'rpx',
                height: sliderHeight + 'rpx',
                borderRadius: sliderRadius,
                bottom: bottom,
                background: sliderBgColor,
                marginBottom: bottom == '50%' ? '-' + sliderHeight / 2 + 'rpx' : 0
            }"
        ></view>
    </view>
</template>

<script>
export default {
    name: 'tuiTabs',
    props: {
        // 标签页
        tabs: {
            type: Array,
            default() {
                return [];
            }
        },
        // tabs宽度，不传值则默认使用windowWidth，单位px
        width: {
            type: Number,
            default: 0
        },
        // rpx
        height: {
            type: Number,
            default: 80
        },
        // rpx 只对左右padding起作用，上下为0
        padding: {
            type: Number,
            default: 30
        },
        // 背景色
        backgroundColor: {
            type: String,
            default: '#FFFFFF'
        },
        // 是否固定
        isFixed: {
            type: Boolean,
            default: false
        },
        // px
        top: {
            type: Number,
            // #ifndef H5
            default: 0,
            // #endif
            // #ifdef H5
            default: 44
            // #endif
        },
        // 是否去掉底部线条
        unlined: {
            type: Boolean,
            default: false
        },
        // 当前选项卡
        currentTab: {
            type: Number,
            default: 0
        },
        // 滑块宽度
        sliderWidth: {
            type: Number,
            default: 68
        },
        // 滑块高度
        sliderHeight: {
            type: Number,
            default: 6
        },
        // 滑块背景颜色
        sliderBgColor: {
            type: String,
            default: '#5677fc'
        },
        sliderRadius: {
            type: String,
            default: '50rpx'
        },
        // 滑块bottom
        bottom: {
            type: String,
            default: '0'
        },
        // 标签页宽度
        itemWidth: {
            type: String,
            default: '25%'
        },
        // 字体颜色
        color: {
            type: String,
            default: '#666'
        },
        // 选中后字体颜色
        selectedColor: {
            type: String,
            default: '#5677fc'
        },
        // 字体大小
        size: {
            type: Number,
            default: 28
        },
        // 选中后 是否加粗 ，未选中则无效
        bold: {
            type: Boolean,
            default: false
        },
        zIndex: {
            type: [Number, String],
            default: 996
        }
    },
    watch: {
        currentTab() {
            this.checkCor();
        },
        tabs() {
            this.checkCor();
        },
        width(val) {
            this.tabsWidth = val;
            this.checkCor();
        }
    },
    created() {
        // 高度自适应
        setTimeout(() => {
            uni.getSystemInfo({
                success: res => {
                    this.winWidth = res.windowWidth;
                    this.tabsWidth = this.width == 0 ? this.winWidth : this.width;
                    this.checkCor();
                }
            });
        }, 0);
    },
    data() {
        return {
            winWidth: 0,
            tabsWidth: 0,
            scrollLeft: 0
        };
    },
    methods: {
        checkCor: function() {
            let tabsNum = this.tabs.length;
            let padding = (this.winWidth / 750) * this.padding;
            let width = this.tabsWidth - padding * 2;
            let left = (width / tabsNum - (this.winWidth / 750) * this.sliderWidth) / 2 + padding;
            let scrollLeft = left;
            if (this.currentTab > 0) {
                scrollLeft = scrollLeft + (width / tabsNum) * this.currentTab;
            }
            this.scrollLeft = scrollLeft;
        },
        // 点击标题切换当前页时改变样式
        swichTabs: function(index) {
            let item = this.tabs[index];
            if (item && item.disabled) return;
            if (this.currentTab == index) {
                return false;
            } else {
                this.$emit('change', {
                    index: Number(index)
                });
            }
        }
    }
};
</script>

<style scoped>
/* 新增滚动容器样式 */
.tui-tabs-scroll {
    width: 100%;
    height: 100%;
    overflow-x: auto; /* 允许横向滚动 */
    overflow-y: hidden; /* 禁止纵向滚动 */
    -webkit-overflow-scrolling: touch; /* 优化移动端滚动体验 */
}

/* 标签项容器：让所有标签并排排列 */
.tui-tabs-container {
    display: flex; /* 横向排列 */
    align-items: center;
}

/* 原有样式调整 */
.tui-tabs-view {
    width: 100%;
    box-sizing: border-box;
    position: relative; /* 确保滑块定位正确 */
}

.tui-tabs-item {
    flex-shrink: 0; /* 禁止标签项被压缩（确保宽度生效） */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 隐藏滚动条（可选，优化视觉效果） */
.tui-tabs-scroll::-webkit-scrollbar {
    display: none;
}
.tui-tabs-scroll {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* 其他原有样式保持不变 */
.tui-tabs-relative {
    position: relative;
}

.tui-tabs-fixed {
    position: fixed;
    left: 0;
}

.tui-tabs-fixed::before,
.tui-tabs-relative::before {
    content: '';
    position: absolute;
    border-bottom: 1rpx solid #eaeef1;
    -webkit-transform: scaleY(0.5) translateZ(0);
    transform: scaleY(0.5) translateZ(0);
    transform-origin: 0 100%;
    bottom: 0;
    right: 0;
    left: 0;
}

.tui-unlined::before {
    border-bottom: 0 !important;
}

.tui-tabs-disabled {
    opacity: 0.6;
}

.tui-tabs-title {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
}

.tui-tabs-active {
    transition: all 0.15s ease-in-out;
}

.tui-tabs-slider {
    position: absolute;
    left: 0;
    transition: all 0.15s ease-in-out;
    z-index: 0;
    transform: translateZ(0);
}

.tui-badge {
    position: absolute;
    font-size: 24rpx;
    color: #fff;
    height: 32rpx;
    min-width: 20rpx;
    padding: 0 6rpx;
    border-radius: 50%;
    background-color: #F34B0B;
    right: -10rpx;
    top: -10rpx;
    transform: translateX(70%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.tui-badge-dot {
    position: absolute;
    height: 16rpx;
    width: 16rpx;
    border-radius: 50%;
    right: -4rpx;
    top: -4rpx;
}
</style>    